import React, {useState} from "react";
import {createStyles} from "antd-style";
import FileDivePath from "@/pages/HomePage/FileDive/FileDiveController/FileDivePath.tsx";
import {Button, Form, Input, Modal} from "antd";
import {useSearchParams} from "react-router";
import FileBucketApi from "@/api/web/FileBucketApi.ts";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: flex;
            width: 100%;
            height: 36px;
            place-content: space-between;
            white-space: nowrap;
            transition: background-color .2s;
            
            &:hover {
                background-color: ${token.colorBgContainer}8f;
            }
        `,
    }
})

/**
 * 文件浏览顶部控制器
 */
const FileDiveController: React.FC = () => {
    const styles = useStyles().styles;
    const [createFbModalOpen, setCreateFbModalOpen] = useState(false)
    const [fbName, setFbName] = useState('')
    const [searchParams] = useSearchParams();

    const onCancel = () => {
        setCreateFbModalOpen(false)
    }

    const path = searchParams.get("path");
    const isPathError = () => {
        return path == null || path == '' || path == "/"
    }

    const onSubmit = ({name}: { name: string }) => {
        if (path == null) {
            window.messageApi.error("路径错误，请检查浏览器路径path参数").then()
            return
        }
        FileBucketApi.createFileBucket({name: name, rootPath: path}).then(res => {
            if (res.status) {
                window.messageApi.success("创建成功").then()
                onCancel()
            }
        })
    }

    return (
        <div className={styles.container}>
            <FileDivePath/>
            <div>
                <Button onClick={() => {
                    setCreateFbModalOpen(true)
                }}>设置为容器</Button>
            </div>
            <Modal
                open={createFbModalOpen}
                onCancel={onCancel}
                onOk={onCancel}
                closeIcon={null}
                footer={null}
            >
                {
                    isPathError() ?
                        <h2>不能在此创建容器</h2> :
                        <Form
                            name="create-fb"
                            labelCol={{span: 4}}
                            labelAlign="right"
                            colon={false}
                            onFinish={(values) => {
                                onSubmit({name: values.name})
                            }}
                        >
                            <Form.Item label="容器根路径">
                                <Input
                                    value={path ? path : ""}
                                    disabled={true}
                                />
                            </Form.Item>
                            <Form.Item label="容器名称"
                                       name="name"
                                       rules={[{min: 5, whitespace: true}]}
                            >
                                <Input
                                    value={fbName}
                                    onInput={(evt) => {
                                        // @ts-ignore
                                        setFbName(evt.value)
                                    }}
                                />
                            </Form.Item>
                            <Form.Item label=" ">
                                <Button htmlType="submit">确认</Button>
                            </Form.Item>
                        </Form>
                }
            </Modal>
        </div>
    )
}

export default FileDiveController
